<template>
  <div style="height:100%;">
    <el-container style="height:100%;">
      <el-header style="height:auto;">
        <div style="padding: 17px 0 0 0;">
          <niupi-btn type="add" @click="addIconLibrary">新增图标库</niupi-btn>
          <niupi-btn type="add" @click="addIcon">新增图标</niupi-btn>
        </div>
      </el-header>
      <el-main style="height:100%;">
        <el-tabs type="border-card" style="height:98%;">
          <el-tab-pane :label="iconLibrary.name" v-for="iconLibrary in iconLibraryList" :key="iconLibrary.id">
            <div class="iconLibrary-container" v-for="icon in iconLibrary.iconList" :key="icon.id" @click="setClip(icon.name, '复制成功')">
              <span class="el-icon-close deleteBtn" @click.stop="deleteIcon(icon)"></span>
              <i :class="icon.name"></i>
              <el-tooltip :content="`单击复制：${icon.name}`" placement="bottom">
                <span v-text="icon.chineseName !== undefined ? icon.chineseName : icon.name"></span>
              </el-tooltip>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import frameworkUtil from '@/framework/js/frameworkUtil.js'
import niupiBtn from "@/components/niupiBtn/niupiBtn.vue";
import resData from '@/api/sysIcon/sysIcon.json'
export default {
  name: 'icon',
  components: {
    'niupi-btn': niupiBtn,
  },
  created () {
    this.list();
  },
  data () {
    return {
      iconLibraryList: [] // icon库
    }
  },
  methods: {
    list () {
      this.iconLibraryList = resData.data;
    },
    // 将图标class复制到剪切板
    setClip (content, msg) {
      frameworkUtil.other.setClip(content);
      this.$layer.msg(msg);
    },
    // 新增图标库
    addIconLibrary () {
      this.$layer.iframe({
        content: {
          content: require('./page/addIconLibrary.vue').default, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {} // props
        },
        area: ['400px', '300px'],
        maxmin: true, // 开启最大化最小化
        title: '新增图标库',
        cancel: () => { // 关闭事件
        }
      });
    },
    // 新增图标
    addIcon () {
      this.$layer.iframe({
        content: {
          content: require('./page/addIcon.vue').default, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {} // props
        },
        area: ['500px', '400px'],
        maxmin: true, // 开启最大化最小化
        title: '新增图标库',
        cancel: () => { // 关闭事件
        }
      });
    },
    // 删除图标
    deleteIcon (icon) {
      const confirmTip = `是否确认删除图标【${icon.chineseName ? icon.chineseName : icon.name}】?`
      this.$layer.confirm(confirmTip, {
        btn: ['确定', '取消']
      }, (layerid) => {
        // this.$http.post('http://rap2.taobao.org:38080/app/mock/257330/user/delete', { id: id }).then((res) => {
        //   if (res.data.code === 200) {
        //     this.$layer.msg('操作成功!');
        //     this.getTableData();
        //   } else {
        //     this.$layer.msg(res.data.msg);
        //   }
        // });
        this.$layer.close(layerid);
      }, (layerid) => {
        this.$layer.close(layerid);
      })
    }
  }
}

</script>
<style rel="stylesheet/scss" lang="scss">
.el-tabs__content {
  height: calc(100% - 80px);
}

.iconLibrary-container {
  height: 100px;
  text-align: center;
  width: 140px;
  float: left;
  color: #24292e;
  cursor: pointer;

  .deleteBtn {
    position: relative;
    left: 23px;
    top: 10px;
    color: red;
    font-weight: bold;
  }

  i {
    font-size: 30px;
    display: block;
    margin: 10px 0;
  }
}
</style>
